
class TVueComp{
    constructor(compKey){
        this.key = compKey;
        this.template="";
        this.dataHandler= null;
    }
    getComp(){
        var me =this;
        var res = {            
            template:template,
            data(){
                return {
                    key : me.key,
                    dataInfo: (vueComps.compDatas[me.key] && vueComps.compDatas[me.key]!=null)?vueComps.compDatas[me.key]:{}
                }
            },
            computed:{
                compInfo(){
                    var self = this;
                    var res = self.dataInfo;
                    if( me.dataHandler && dataHandler!=null){
                        try{
                            res = me.dataHandler(res);
                        }
                        catch(err){
                            res = self.dataInfo;
                            console.log(eer);
                        }
                    }
                    return res;
                }
            }
        }
        return res;
    }
    getCompByTemplateFn( templateFn){
        var me =this;
        return new Promise((success , faild)=>{
            var onGet = function(){
                var comp = me.getComp();
                success(comp);
            }
            $.ajax({
                url: templateFn,
                    cache: false,
                    success: function (aRes) {
                        me.template = aRes;
                        onGet(aRes);
                    },
                    error: function (a, b, c) {
                        me.template = "<div></div>";
                        onGet("");
                    }
            });
        })
    }
}

var vueComps={
    vue: null,
    compDatas:{},
    comps:{},
    regist(key , vueComp){
        var me = vueComps;
        try{
            me.comps[key] = vueComp;
        }
        catch(er){
            console.log(er);
        }
        return vueComp;
    },
    registByHtml( compKey , html , dataHandler){
        var me = vueComps;
        var res = null;
        try{
            var comp = new TVueComp(compKey);
            comp.template = html;
            comp.dataHandler = dataHandler;
            var vueComp = comp.getComp();
            res = me.regist(compKey, vueComp);
        }
        catch(er){
            console.log(er);
        }
        return res;
    },
    registByTemplateFn( compKey , templateFn , dataHandler){
        var me = vueComps;
        var res = null;
        try{
            var comp = new TVueComp(compKey); 
            comp.dataHandler = dataHandler;
            comp.getCompByTemplateFn( templateFn).then(vueComp=>{
                res = me.regist(compKey , vueComp);
                success(res);
            })
        }
        catch(er){
            console.log(er);
        }
        return res;
    },
    getRouters(){
        var me = vueComps;
        var res=[];
        Object.keys(me.comps).forEach(compKey=>{
            res.push({
                path: compKey ,
                component: me.comps[compKey]
            })
        })
        return res;
    },
    showComponent( compKey , data){
        var me = vueComps;
        try{
            var path = compKey;
            me.compDatas[compKey] = (data&&data!=null)? data:{};
            me.vue.$router.push({path:path , query:{t:(new Date()).getTime()}});
        }
        catch(er){
            console.log(er);
        }
    }
}
var appVueOpts ={
    created(){
        vueComps.vue = this;
    },
    router: [],
    methods:{
        onPickItem(event){
            var me = this;
            var rk = event.currentTarget.dataset.rk;
            vueComps.showComponent(rk,{ msg:'ddddd'+( new Date()).getTime()})
        }
    } 
}
/*          注册组件         */
vueComps.registByHtml('/home' , '<div></div>');

/*-----------------------------------------------------------*/

appVueOpts.router = new VueRouter({
    routes : vueComps.getRouters()
});

/*
    const appRoot = new Vue(appVueOpts).$mount('#app')
*/

